<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src="../hanshunping/js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--v-on: 为HTML标签绑定事件    -->
    <!--v-on:后面的事件名称是之前原生事件属性名去掉on。-->
    <!--
        * 单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click
        * 失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur
    -->
    <input type="button" value="一个按钮" v-on:click="show()">
    <input type="button" value="一个按钮" @click="show()">
</div>

<script>
    new Vue({
            el: "#app",
            data() {
                return {
                    username: "",
                }
            },
            methods:{
                show(){
                    alert("我被点了...");
                }
            }
        });
</script>
</body>
</html>